<template>
    <div class="login" id="login">
        <div class="login">
            <el-form :model="formLogin">
                <el-form-item>
                    <h2 class="title">后台管理系统</h2>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formLogin.username" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formLogin.password"  type="password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登陆</el-button>
                    <span v-show="this.errorInfo.isShowError" class='error'>
                        {{this.errorInfo.text}}
                    </span>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import apis from '../apis/apis';
    export default {
        name: 'login',
        data() {
            return {
                formLogin: { //表单对象
                    username: '',
                    password: ''
                },
                errorInfo: {
                    text: '登陆失败,请重试',
                    isShowError: false //显示错误提示
                }

            }
        },
        mounted() {
            document.onkeydown = (event) => {
                var router = this.$route.path;
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if(e && e.keyCode == 13 && this.$route.path == '/login') { // enter 键
                    this.login();
                }
            };
            var loginLog = {
                ip: returnCitySN["cip"],
                city: returnCitySN["cname"] + '-' + '进入首页'
            };
        },
        methods: {
            login() {
                var self = this;
                //调用后端登陆接口
                apis.shiroApi.loginIn(self.formLogin).then((data) => {
                    var loginLog = {};

                    if(data.data.code == 0) {
                        var json = data.data;

                        self.$common.setSessionStorage('token', json.data.token_info.access_token);
                        self.$common.setSessionStorage('username', json.data.username);
                        self.$common.setSessionStorage('ids', json.data.id);
                        self.$common.setSessionStorage('lev', true);

                        console.info('欢迎：' + json.data.username + '登录');
                        if(json.data.type == 0) {

                            this.$store.commit('changeRole', 'vip');
                            self.$router.replace({
                                path: "/barCode"
                            });
                        } else if(json.data.type == 1) {

                            this.$store.commit('changeRole', 'member');
                            self.$router.replace({
                                path: "/vipUser"
                            });
                        } else {

                            this.$store.commit('changeRole', 'admin');
                            self.$router.replace({
                                path: "/index"
                            });
                        }

                        loginLog = {
                            ip: returnCitySN["cip"],
                            city: returnCitySN["cname"] + '-' + json.data.username + '-登陆'
                        };
                        return;
                    } else {
                        self.errorInfo.text = data.data.msg;
                        this.$message(data.data.msg);
                    }

                    self.$store.dispatch("loginLog", loginLog);
                }).catch((err) => {

                    self.errorInfo.isShowError = true;
                    self.errorInfo.text = '系统接口异常';
                });
            },
            rollBackTables() {
                var text = '数据还原';
            }
        }
    }
</script>

<style lang="scss" scoped>
    $input_width:300px;
    #login {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .login {
            width: 460px;
            height: 296px;
            margin-top: -150px;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
            .title {
                text-align: center;
                color: #505458;
            }
            .el-form-item__content {
                width: $input_width;
            }
            .el-button {
                width: $input_width;
            }
            .el-form {
                margin: 30px 80px auto 80px;
                .error {
                    display: block;
                    text-align: center;
                    color: red;
                }
            }
        }
    }

    .recover {
        position: absolute;
        bottom: 0px;
        cursor: pointer;
        color: #E6A23C;
        // display: none;
    }

    .bei {
        position: absolute;
        bottom: 20px;
        cursor: pointer;
        color: #505458;
    }
</style>
